<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>key</title>
</head>
<body>
  <div id="demo">
    <div>
      <button @click='add'>add first</button>&nbsp;
      <button @click="remove">remove first</button>&nbsp;
      <button @click='sort'>sort</button>
    </div>
    <h2>使用id作为key</h2>
    <ul>
      <li v-for='p in persons' :key='p.id'>
        {{p.id}}--{{p.name}}--{{p.age}}<input/>
      </li>
    </ul>
    <h2>使用index作为key</h2>
    <ul>
      <li v-for='(p,index) in persons' :key='index'>
        {{p.id}}--{{p.name}}--{{p.age}}<input/>
      </li>
    </ul>
  </div>
   <script src='../js/vue.js'></script>
   <script>
     new Vue({
       el:"#demo",
       data:{
         persons:[
           {id:1,name:'Tom',age:13},
           {id:2,name:'Jack',age:12}
         ]
       },
       methods:{
         add(){
           this.persons.unshift({id:this.persons.length+1,name:'bob',age:14})
         },
         remove(){
           this.persons.shift()
         },
         sort(){
           this.persons.sort((p1,p2)=>p1.age-p2.age)
         }
       }
     })
   </script>
</body>
</html>